// global variables
@clr-red: #FF5900;
// @clr-pearl: #aaaaaa;
@clr-blue: #00abe8;
@clr-deep: #0083e8;
@clr-green: #008300;
@clr-orange: #f57c00;
@clr-yellow: #FFD966; //rgb(255, 217, 102); 
@clr-black: #000000;
@clr-gray: #1f1f1f;
@clr-graphite: #8a8a8a;
@clr-silver: #f8f8f8;
@clr-white: #ffffff;
// @clr-cian: #01aac8;
// @clr-pink: #e8d5f6;

// global rules
form { margin-bottom:0px; }
.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { width:auto; min-width:15em; }
.float-right { float:right; }
.float-left { float:left; }
.text-right { text-align:right; }
.text-left { text-align:left; }
.text-justify { text-align:justify; }
.text-center { text-align:center; }
.transition (@t:0.2s) { transition:all @t ease-in-out; }
.uppercase { text-transform:uppercase; }
.margin-top-1 { margin-top:1em; }
.margin-bottom-1 { margin-bottom:1em; }
.margin-top-2 { margin-top:2em; }
.margin-bottom-2 { margin-bottom:2em; }
.margin-top-4 { margin-top:4em; }
.margin-bottom-4 { margin-bottom:4em; }
.margin-top-8 { margin-top:8em; }
.margin-bottom-8 { margin-bottom:8em; }
.text-left { text-align:left; }
.text-center { text-align:center; }
.text-right { text-align:right; }
.red { position:relative; color:@clr-red; }
.overline {
	position:relative; display:inline-block;
	&:after {
		display:block; position:absolute; width:100%; height:1px; background-color:@clr-red; content:'';
		top:50%; left:0%; transform:rotate(-3deg);
	}
}

sup, sub { letter-spacing:1px; }
a { color:@clr-black; text-decoration:underline; .transition; &:hover { color:@clr-red; } }
b { }
strong { }
p { text-align:left; }
* { outline:none; }
ol { list-style-position:inside; padding-left:0em; }
small { color:inherit!important; }
body {
	-webkit-font-smoothing:subpixel-antialiased!important;
	background: #fefefe repeat 50% 0%;
	background-attachment:fixed;
	margin-top:4.25em;
	overflow-x:hidden;
	font:300 1.38em Verdana; color:@clr-black;
	background-color:@clr-white; transition:background 0.2s/0.4s ease-in-out;

	.navbar-fixed-top {
		background:@clr-black; width:100%;
		border:0px!important; margin-bottom:0px;
		.navbar-brand {
			height:auto; padding:0em 1em; margin-right:0.62em; font-family:Calibri;
			position:relative; color:@clr-white!important;
			// line-height:3.0797em;
			text-decoration:none!important;
			small { font-size:0.62em; text-transform:uppercase; }
			img { height:42px; margin-top:8px; display:block!important; float:left; }
			span { display:block; float:left; padding-top:0.38em; padding-left:0.38em; }
			&:after {
				display:block; position:absolute; content:'';
				top:10%; height:80%; right:-0.62em; width:1px;
				background-color:@clr-white; opacity:0.1;
			}
		}
		.nav {
			padding:0em 1em;
			li {
				a {
					font-size:1em; line-height:4.25em; color:@clr-white; padding:0em 1em;
					.transition; text-decoration:none!important; font-family:Calibri;
					text-transform:uppercase;
					&:hover {
						color:@clr-black; background-color:@clr-white;
					}
				}
				.dropdown-menu {
					background-color:@clr-black; min-width:240px; width:30vw;
					padding:1.62em;
					.h3 {
						display:block; color:@clr-white; margin:0em 0em 0.62em 0em;
					}
					a {
						display:inline-block; line-height:1em; background-color:rgba(255,255,255,0.38);
						padding:0.38em; margin:0.38em 0.19em; transition:background-color 0.2s ease-out;
						&:hover {
							color:white;
							background-color:@clr-red;
						}
					}
				}
			}
		}
		#callme {
			float:right; position:relative; font-family:Calibri;
			margin:0em; font-size:1.38em; line-height:3.0797em; margin-right:0.62em;
			a {
				color:@clr-white; background-color:@clr-red; line-height:3.0797em; padding:0.19em 0.38em 0.19em 0.38em; .transition; text-decoration:none!important;
				&:hover { 
					color:@clr-black; background-color:@clr-white; text-decoration:none;
					.fa { color:@clr-red; }
				}
				.fa { color:@clr-white; margin-right:0.19em; font-size:1.38em; transform:translateY(0.1em); transform:scale(0.618) translateY(0.19em); .transition; }
			}
		}
		#header-social {
			display:inline-block; float:right; margin-top:0.81em; margin-left:1em; margin-right:1em;
			a {
				position:relative; display:inline-block; width:1.62em; height:1.62em; font-size:1.62em;
				border-radius:50%;
				color:@clr-white; .text-center;
				.fa {
					position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);
				}
				&.social-instagram { background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%); }
				&.social-telegram { background-color:#0088CB; }
				&.social-whatsapp { background-color:#2CB742; }
				&.social-viber { background-color:#7D3DAF; }
			}
		}
	}

	header {
		margin-top:-1px; min-height:62vh; overflow:hidden;
		background-repeat:no-repeat; background-size:cover; background-position:50% 50%;
		background-attachment:fixed;
		h1, .h1 { .text-center; font-family:Calibri; }
		h2 { .text-center; text-transform:uppercase; font-size:1em; }
		hr { opacity:0.32; }
		.row { position:relative; }
		.fog {
			position:absolute; z-index:1; background-color:black;
			width:100%; height:100%; min-height:62vh; top:0%; left:0%;
		}
		#mainform {
			position:relative; z-index:10;
		}
		#maintext {
			position:relative; z-index:10;
			padding-top:2.25em; padding-bottom:2.25em;
			a { color:@clr-white!important; }
		}
	}

	section {
		margin-bottom:2em;
		position:relative; z-index:10;
		h1, .h1 { 
			.text-center; font-size:2.62em; text-transform:uppercase; font-weight:bold;
			margin:1.38em 0em; font-family:Calibri;
		}
		h2, .h2 {
			.text-center; font-size:1em; opacity:0.62; text-transform:uppercase; transform:translateY(-2.62em);
			margin-top:1em;
		}
		h3, .h3 { font-size:1.38em; font-family:Calibri; }
		// hr { width:4.25em; height:2px; background-color:@clr-blue; border:0px; }
		
		.vertical-parent {
			position:relative;
			.vertical-child {
				width:100%; position:absolute; top:50%; left:0%; transform:translateY(-50%);
			}
		}

		.tabpane {
			color:@clr-gray;
			img { filter:grayscale(100%); }
			&.active, &:hover {
				color:@clr-deep;
				img { filter:grayscale(0%); }
			}
		}
		.tab {
			max-height:0; opacity:0; height:auto; overflow:hidden; transition:max-height 0.4s ease-in-out, opacity 0.2s ease-in-out;
			&.active { max-height:100%; opacity:1; }
		}

		.header {
			h2 { font-weight:bold; font-size:2.62em; .text-center; text-transform:uppercase; }
			h3 { .text-center; }
			p { .text-center; }
		}

		&#products {
			border-top:2px solid rgba(0,0,0,0.62);
			.products {
				color:@clr-black; margin-bottom:2em;
				.products-cover {
					overflow:hidden; border:1px solid rgba(0,0,0,0.19);
					&:hover {
						img { transform:scale(1.2) rotate(-3deg); }
					}
					img {
						display:block;
						width:100%;
						transition:all 3s ease-in-out;
					}
				}
				.products-info {
					margin:1em 0em;
					p {
						.text-center; margin:0em;
						&.products-title {
							text-transform:uppercase; font-weight:bold; font-size:1.38em; font-family:Calibri;
						}
					}
				}
				.lb {
					img {
						width:100%;
					}
				}
			}
		}

		&#personal {
			border-top:2px solid rgba(0,0,0,0.62);
			.personal {
				height:15em;
				.personal-cover {
					text-align:center;
					img { width:100%; max-width:64px; }
				}
				.personal-title { text-transform:uppercase; text-align:center; margin-top:1em; }
				.personal-smalltext {
					padding:1.62em 2.62em;
					p { text-align:center; color:@clr-graphite; }
				}
			}
		}

		&#social {
			border-top:2px solid rgba(0,0,0,0.62);
			h1 {
				a {
					font-size:1em;
					.fa, img { height:1em; font-size:1em; }
					.fa { color:black; font-size:1em; }
				}
			}
			a {
				text-decoration: none;
				&.lb {
					img {
						width:100%; margin-bottom:1em;
					}
				}
				&.social-title { display:block; text-transform:uppercase; overflow:hidden; }
			}
			.fa { color:@clr-graphite; }
		}

		&#contacts {
			border-top:2px solid rgba(0,0,0,0.62);
		}

		&.banners {
			position:relative; margin-bottom:0em;
			.banners_container {
				position:relative; top:0px; left:0px; width:100%; height:18.07em;
				z-index:10;
				.banner {
					&:before {
						display:block; position:absolute; content:'';
						top:0px; left:0px; width:100%; height:100%; z-index:10;
						background:@clr-white; opacity:0;
					}
					* { position:relative; z-index:11;}
					position:absolute; top:0px; left:-7px; width:100%; height:18.07em;
					opacity:0; z-index:10; transition:opacity 0.5s ease-in-out, left 0.5s ease-in-out;
					background-repeat:no-repeat; background-size:cover;
					background-position:50% 50%; 
					color:@clr-gray; transition-delay:0.1s;
					&.active {
						opacity:1; z-index:11; left:0px;
						transition-delay:0s;
						h2 { transform:translateX(0px); opacity:1; }
						p { transform:translateX(0px); opacity:1; }
					}
					h2 {
						font-weight:bold; color:@clr-white; font-size:2.62em; opacity:0;
						margin:1.38em 0em 0.62em 0em; transform:translateX(-14px);
						text-shadow:1px 1px 7px rgba(0,0,0,0.62), 1px 1px 0px rgba(0,0,0,0.62); transition:all 0.4s ease-in-out; transition-delay:0.1s;
					}
					p {
						font-size:1.38em; font-weight:bold; letter-spacing:1px; opacity:0;
						color:@clr-white; text-shadow:1px 1px 7px rgba(0,0,0,0.62), 1px 1px 0px rgba(0,0,0,0.62); transform:translateX(-19px);
						transition:all 0.4s ease-in-out; transition-delay:0.2s;
					}
					a {
						&.btn {
							text-shadow:none;
							box-shadow:1px 1px 7px rgba(0,0,0,0.62);
						}
					}
				}
			}
			.banners_controls {
				position:absolute; z-index:19; bottom:0px; width:100%; .text-center;
				.control {
					display:inline-block; background-color:rgba(255,255,255,0.322);
					width:1.62em; height:1.62em; margin:1em 0.5em; cursor:pointer;
					.transition; border:2px solid @clr-white; border-radius:50%;
					&:hover { background-color:@clr-blue; border-color:@clr-white; }
					&.active { background-color:@clr-white; border-color:@clr-white; }
				}
			}
		}

		&#country {
			.docset {
				.text-center; margin-bottom:1.62em;
				.docset-icon {
					position:relative; border-radius:50%;
					display:inline-block; width:6.88em; height:6.88em;
					box-shadow: inset 0px 0px 2px 1px #6B9AC9;
					.fa { display:inline-block; font-size:1.62em; }
					img { display:inline-block; width:4.25em; height:4.25em; }
					* { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
				}
				.docset-text {
					.docset-name {
						text-transform:uppercase; margin-top:0.62em;
					}
					.docset-link {
						a {
							text-decoration:none; color:red;
							.fa {}
						}
					}
				}
			}
			table {
				tr {
					td,th {
						&[colspan="3"] {
							background-color:@clr-yellow!important; font-weight:bold!important;
						}
						p { margin-bottom:0em; }
					}
				}
			}
		}
		.lb {
			img {
				width:100%;
			}
		}


		// .horizontal {
		// 	position:relative;
		// 	.horizontal-container {
		// 		position:relative; overflow:hidden; white-space:nowrap; z-index:9;
		// 		.row {
		// 			white-space:nowrap; position:relative; 
		// 			& > div {
		// 				display:inline-block!important; width:20%;
		// 				padding:1.62em 1em; vertical-align:text-top;
		// 				white-space:normal;
		// 				a {
		// 					&:hover {
		// 						color:@clr-blue;
		// 						* { color:inherit; }
		// 					}
		// 				}
		// 			}
		// 		}
		// 	}
		// 	.horizontal-controls {
		// 		position:absolute; top:0px; left:0px; width:100%; height:100%;
		// 		z-index:8;
		// 		& > div {
		// 			position:absolute; top:50%; cursor:pointer; 
		// 			font-size:1.62em; color:@clr-gray; .transition;
		// 			&.horizontal-controls-prev {
		// 				transform-origin:100% 50%; left:2.62em;
		// 			}
		// 			&.horizontal-controls-next {
		// 				transform-origin:0% 50%; right:2.62em;
		// 			}
		// 			&:hover {
		// 				color:@clr-blue;
		// 				transform:scale(1.382);
		// 			}
		// 		}
		// 	}
		// }

		// .files {
		// 	.file {
		// 		display:block; padding-left:1.62em; position:relative;
		// 		&:hover { }
		// 		&:before {
		// 			display:block; position:absolute; left:0em; width:1.62em;
		// 			font-family:FontAwesome; content:'\f016';
		// 		}
		// 		&[href*='.txt'],&[href*='.rtf'] { &:before { content:'\f0f6'; } }
		// 		&[href*='.pdf'] { &:before { content:'\f1c1'; } }
		// 		&[href*='.doc'],&[href*='.docx'] { &:before { content:'\f1c2'; } }
		// 		&[href*='.xls'],&[href*='.xlsx'] { &:before { content:'\f1c3'; } }
		// 		&[href*='.ppt'],&[href*='.pptx'] { &:before { content:'\f1c4'; } }
		// 		&[href*='.jpg'],&[href*='.jpeg'],&[href*='.png'],&[href*='.gif'],&[href*='.bmp'],&[href*='.tiff'] { &:before { content:'\f1c5'; } }
		// 		&[href*='.rar'],&[href*='.zip'],&[href*='.7z'] { &:before { content:'\f1c6'; } }
		// 		&[href*='.mp3'],&[href*='.wav'],&[href*='.flac'] { &:before { content:'\f1c7'; } }
		// 		&[href*='.mp4'],&[href*='.mpeg'],&[href*='.avi'] { &:before { content:'\f1c8'; } }
		// 	}
		// }

		// #pages {
		// 	a {
		// 		display:inline-block; margin-left:0.19em; margin-right:0.19em;
		// 		color:@clr-graphite; padding:0.38em 0.38em 0.19em 0.38em; font-size:1.62em; line-height:1em;
		// 		&:hover { color:@clr-gray; }
		// 		&.page {
		// 			background-color:@clr-graphite; color:@clr-gray;
		// 			&:hover, &.current { background-color:@clr-gray; color:@clr-graphite; }
		// 		}
		// 	}
		// }

		#yMap {
			width:100%; height:23em;
		}

		.opendialog { cursor:pointer; }

		.lightbox {
			position:relative;
			img { position:relative; z-index:10; }
			&:after {
				display:block; width:2em; height:2em; content:'\f00e';
				font:normal 2.76em 'FontAwesome'; opacity:0; color:@clr-white;
				position:absolute; top:50%; left:50%; margin-top:-0.5em; margin-left:-0.5em;
				z-index:12; .transition; text-shadow:1px 1px 0px @clr-gray;
			}
			&:hover {
				&:after { opacity:0.62; text-shadow:1px 1px 10px @clr-black; }
			}
		}

	}

	form {
		.input-group {
			.margin-bottom-1;
			* { border-radius:0; border-color:rgba(0,0,0,0.62); }
			.input-group-addon {
				background-color:rgba(0,0,0,0.62); color:@clr-white; border-radius: 1.19em 0em 0em 1.19em;
			}
			.form-control {
				 border-radius: 0em 1.19em 1.19em 0em;	
			}
			textarea {
				width:100%; height:60px;
			}
			button { border-radius:1.19em!important; }
		}
	}

	footer {
		background-color:@clr-black; color:@clr-white;
		.container {
			padding-top:2em; padding-bottom:2em;
			.copyright {
				line-height:1.38em; color:@clr-white; font-size:0.62em;
				img { margin-right:1em; }
			}
			.menu {
				text-align:right;
				a {
					text-decoration:none!important;
					&.menuitem {
						display:inline-block; white-space:nowrap; padding:0.62em 1em; 
						color:@clr-black; background-color:@clr-white; margin:0.19em 0.38em;
						&:hover { background-color:@clr-red; color:@clr-white; text-decoration:none; }
					}
				}
			}
		}
	}

	#overlay { 
		position:fixed; z-index:98; top:0%; left:0%; width:100%; height:100%;
		background:@clr-gray; display:none; .transition; cursor:pointer; opacity:0;
	}
	.dialog {
		position:fixed; z-index:99; top:0em; left:50%; width:43em; margin-left:-20em; height:auto; display:none; opacity:0; box-shadow:1px 1px 5px rgba(0,0,0,0.25);
		padding:1.62em 1.62em 1.38em 1.62em; background-color:@clr-white; transition:top 1s ease-in-out;
		h2 { margin-bottom:0.62em; margin-top:0em; }
		h3 { margin-top:0em; }
		&.opened { display:block; top:4.25em; }
		small { opacity:0.62; }
		.dialogClose {
			cursor:pointer; position:absolute; top:1.62em; right:1.62em;
			color:@clr-black; .transition;
			&:hover { color:@clr-red; }
		}
		.dialog-content {
			.table {
				margin-top:1em;
			}
			p { line-height:1.38em; padding:0; }
		}
		p {
			padding:0.38em 0.62em;
		}
	}

	select {
		font-size:1em; border:0px; position:relative; padding:0em 1.38em 0em 0.62em;
		line-height:2.62em; height:2.62em; border-radius:3px;
		-webkit-appearance:none; -moz-appearance:none; appearance:none; color:@clr-gray;
		background-image: url('/images/caret.png'); background-position: calc(100%-5px) 50%;
		background-repeat:no-repeat; cursor:pointer;
	}

	input[type='checkbox'] {
		-webkit-appearance:none; -moz-appearance:none; appearance:none;
		& + label {
			display:block; position:relative; clear:both;
			overflow:visible; cursor:pointer; font-weight:normal; padding-left:1.19em;
			border:0.2em solid @clr-red; padding:10px 16px; border-radius:0.4em;
			.transition;
			&:before {
				display:block; .transition; position:absolute; left:0em; top:0em;
				content:''; height:0.62em; width:0.62em; border-radius:0.5em;
				background-color:@clr-white; font:normal 1em/1em Arial;
				margin-top:0.09em; margin-left:0.09em; z-index:1; opacity:0.62;
			}
			&:after {
				display:block; .transition; position:absolute; left:-0.4em; top:-0.4em; 
				content:'\f058'; height:1.2em; width:1.2em; border-radius:50%;
				color:@clr-gray; font:normal 1em/1em 'FontAwesome';
				margin-top:0em; text-align:center; z-index:2;
				border:0.2em solid @clr-red; 
			}
			&:hover {
				&:before { opacity:0; }
				// &:after {  }
			}
		}
		&:checked + label {
			border-color:@clr-green;
			&:before { opacity:1; }
			&:after { color:@clr-green!important; border-color:@clr-green; }
		}
	}



	.btn {
		border-radius:1.38em; border-color:@clr-black;
		color:@clr-black; font-family:Calibri; text-transform:uppercase;
		&.btn-primary {
			background-color:@clr-white;
			&:hover { background-color:@clr-red; }
		}
		&.btn-danger {
			background-color:@clr-yellow;
			&:hover { background-color:@clr-red; }
		}
	}

}

@media(max-width:767px) { // XS
	body {
		margin-top:calc(4em - 1px);
			// position:fixed; z-index:90; width:100%; top:0%; right:0%;
		.navbar-fixed-top {
			.navbar-brand {
				img {
					transform:scale(0.81);
				}
			}
			.navbar-collapse { max-height:100vh!important; }
			.navbar-toggle {
				background-color:@clr-red; border-radius:0px; border:0px;
				position:absolute; top:0.19em; right:0.19em;
				.icon-bar {
					background-color:@clr-white;
				}
			}
			.nav {
				li {
					a {
						line-height:2.62em; .text-center;
						border-bottom:1px solid @clr-white;
					}
				}
			}
			#callme {
				line-height:1.38em; padding:1em; float:none; clear:both; text-align:center;
				&:after { display:none; } margin-right:0em;
			}
			#header-social {
				display:block; float:none; clear:both; .text-center; margin-top:0px; margin-bottom:1.62em;
			}
		}
		header {
			margin-top:-4px;
			#maintext {
				padding:1.62em 2.62em;
				// input[type='checkbox'] {
				// 	& + label {
				// 		border-color:transparent!important;
				// 		a { color:@clr-white; }
				// 		&:before { top:-0.19em; left:-0.19em; }
				// 		&:after { border-color:transparent!important; }
				// 	}
				// }
				.btn { display:inline-block; margin:0.38em; }
			}
			#mainimage {}
		}
		section {
			&#social {
				h1 {
					font-size:1.38em;
					span { display:none; }
					a { display:block; clear:both; }
				}
				a {
					&.lb {
						display:block; height:10em; overflow:hidden;
						&+a {
							height:7em; overflow:hidden;
						}
					}
				}
			}
			&#country {
				.docset {
					.docset-icon {

					}
					.docset-text {
						.docset-name {
							margin-top:2.62em;
						}
					}
				}
				.country-text {
					table {
						font-size:0.62em;
					}
				}
			}
		}
		footer {
			.copyright {
				.text-center;
			}
			.menu {}
		}
		.personal { height:6.88em!important; }
		.dialog { width:100vw; left:0%; margin-left:0em; }
	}
}


@media(min-width:768px){ // SM
	body {

	}
}
/*
@media(min-width:992px){ // MD
	
}
@media(min-width:1200px){ // LG
	
}

*/